import React, { useState, useEffect, useRef } from 'react';
import { Modal } from 'antd';
import styles from './index.less';
import mock from './mock';
import mock2 from './mock2';

// 远程加载js （按需引入）
export function loadLuckysheet() {
  return new Promise(function(resolve, reject) {
    if (window.luckysheet) {
      resolve();
      return;
    }

    var urls = [
      // css
      'https://cdn.jsdelivr.net/npm/luckysheet@2.1.13/dist/plugins/css/pluginsCss.css',
      'https://cdn.jsdelivr.net/npm/luckysheet@2.1.13/dist/plugins/plugins.css',
      'https://cdn.jsdelivr.net/npm/luckysheet@2.1.13/dist/css/luckysheet.css',
      'https://cdn.jsdelivr.net/npm/luckysheet@2.1.13/dist/assets/iconfont/iconfont.css',

      // js
      'https://cdn.jsdelivr.net/npm/luckysheet@2.1.13/dist/plugins/js/plugin.js',
      'https://cdn.jsdelivr.net/npm/luckysheet@2.1.13/dist/luckysheet.umd.js',
    ];

    loadjs(urls, {
      async: false,
      success: function() {
        resolve();
      },
    });
  });
}

export default class extends React.Component {
  state = {
    showModal: false,
  };
  componentDidMount = async () => {
    await loadLuckysheet();
    //配置项
    var options = {
      container: 'luckysheetDom', //luckysheet为容器id
      data: mock,
      lang: 'zh', // 设定表格的语言

      forceCalculation: true,

      showinfobar: false, // 标题栏不展示
      enableAddRow: false, // 添加行
      enableAddBackTop: false, //回到顶部
      showtoolbar: false, //是否显示顶部工具栏
      showsheetbar: false, //是否显示底部sheet页按钮
      showstatisticBar: false, //是否显示底部计数栏
      sheetFormulaBar: false, //是否显示公式栏
      allowCopy: false,
      // rowHeaderWidth: 0, //隐藏行标题
      // columnHeaderHeight: 0, //隐藏列标题
      // allowEdit: false, // 是否允许前台编辑
      showConfigWindowResize: false, //图表或数据透视表的配置会在右侧弹出，设置弹出后表格是否会自动缩进
      cellRightClickConfig: {
        copy: false, // 复制
        copyAs: false, // 复制为
        paste: false, // 粘贴
        insertRow: false, // 插入行
        insertColumn: false, // 插入列
        deleteRow: false, // 删除选中行
        deleteColumn: false, // 删除选中列
        deleteCell: false, // 删除单元格
        hideRow: false, // 隐藏选中行和显示选中行
        hideColumn: false, // 隐藏选中列和显示选中列
        rowHeight: false, // 行高
        columnWidth: false, // 列宽
        clear: false, // 清除内容
        matrix: false, // 矩阵操作选区
        sort: false, // 排序选区
        filter: false, // 筛选选区
        chart: false, // 图表生成
        image: false, // 插入图片
        link: false, // 插入链接
        data: false, // 数据验证
        cellFormat: false, // 设置单元格格式
      },

      hook: {
        cellMousedownBefore: (cell, postion, sheetFile, ctx) => {
          if (cell) {
            if (cell.disable) {
              if (cell.isVisible) {
                this.setState({ showModal: true });
                console.log(this);
              }
              return false;
            }
          }
        },
      },
    };
    luckysheet.create(options);

    setTimeout(() => {
      window.luckysheet.setCellValue(1, 3, 5);
    }, 1000);
  };

  handleOk = e => {
    console.log(e);
    this.setState({
      showModal: false,
    });
  };

  handleCancel = e => {
    console.log(e);
    this.setState({
      showModal: false,
    });
  };
  render() {
    return (
      <div className={styles.pageCont}>
        <Modal
          zIndex={10000}
          title="Basic Modal"
          visible={this.state.showModal}
          onOk={this.handleOk}
          onCancel={this.handleCancel}
          wrapClassName={styles.aaa}
        >
          <p>Some contents...</p>
          <p>Some contents...</p>
          <p>Some contents...</p>
        </Modal>
        <div id="luckysheetDom" className={styles.luckysheet}></div>
      </div>
    );
  }
}
